<template>
    <div class="usermanageContainer">
        <el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane
				v-for="(item, index) in tnavList"
				:key="index"
				:label="item.tnav_name"
				:name="`${index}`"
			>
				<span slot="label">
					<i :class="item.icon_name"></i>
					{{item.tnav_name}}
				</span>

				<transition mode="out-in">
					<component :is="selectComponent"></component>
				</transition>
			</el-tab-pane>
		</el-tabs>
    </div>
</template>

<script>
import permissionslist from "./permissionslist.vue"
import addpermissions from  "./addpermissions.vue"
export default {
    data() {
        return {
            tnavList:[],
            activeName: null,
            selectComponent:null,
            user_infos:{},
            canper:false
        }
    },
    methods: {
        // 获取三级菜单
        getTnav(id){
            this.$ajax.get("/tnav?parentid=" + id).then(res=>{
                if(this.canper){
                    this.tnavList = res.data.results;
                }else{
                    res.data.results.pop();
                    this.tnavList = res.data.results;
                }
                
            }).catch(err=>{

            })
        },
        handleClick(tab, event) {
			console.log(tab, event);
		}
    },
    mounted() {
        this.selectComponent = 'permissionslist'
        this.activeName = '0'
        this.user_infos = JSON.parse(window.localStorage.getItem("user"));
		if(this.user_infos.groups.length>0){
			this.user_infos.groups.forEach(item=>{
				if(item.name == "管理员"){
					this.canper = true;
					return false;
				}
			});
        };
        this.getTnav(this.snavId);
    },
    components:{
        permissionslist,addpermissions
    },
    props:["snavId"],
    watch: {
        activeName(){
            if(this.activeName == '0'){
                this.selectComponent = "permissionslist"
            }else if(this.activeName == '1'){
                if(this.canper){
                    this.selectComponent = "addpermissions"
                }else{
                    this.$message({
                        message:"暂无权限",
                        type:"info"
                    })
                }
                
            }
        }
    },
}
</script>


<style lang="scss" scoped>

</style>